<template>
  <div>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 跳转的同时，携带params参数 —— 对象 -->
        <router-link 
          :to="{
            name:'xiang',
            query:{
              id:news.id,
              title:news.title,
              content:news.content,
            }
          }"
        >
          {{news.title}}
        </router-link>
      </li>
    </ul>
    <!-- 展示区（内容区） -->
    <div class="panel panel-body panel-primary">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name:'Message',
    data() {
      return {
        newsList:[
          {id:'asd01',title:'《好消息》',content:'阿里云服务器再次折扣，尽快选购！'},
          {id:'asd02',title:'《来自缅北的一个祝福》',content:'欢迎来到缅北，看我割不割你就完了'},
          {id:'asd03',title:'《如何一夜暴富》',content:'做梦吧，梦里啥都有'},
        ]
      }
    },
    destroyed(){
      console.log('Message已经死了')
    }
  }
</script>